<template>
    <div>
        <el-card class="box-card">
            <div class="name">
                <div class="num">
                    <b>订单编号</b>
                    <el-input class="w-50 m-2" placeholder="输入订单编号" v-model="data.searchData.id"
                        :prefix-icon="Search" />
                </div>
                <div class="phone">
                    <b>手机号</b>
                    <el-input class="w-50 m-2" placeholder="输入手机号" v-model="data.searchData.phone"
                        :prefix-icon="Search" />
                </div>
                <el-button type="primary" @click="searchInfo" :icon="Search">查询</el-button>
                <div class="delete-all">
                    <el-button style="width: 80px;" @click="checkDel">删除选中</el-button>
                </div>
            </div>
            <!-- 挂号列表 -->
            <div class="list">
                <el-table :data="data.tableData" :border="true" style="width: 100%" @selection-change="getCheckId">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="订单编号" />
                    <el-table-column prop="name" label="患者姓名" />
                    <el-table-column prop="department" label="挂号科室" />
                    <el-table-column prop="further" label="是否为复诊" />
                    <el-table-column prop="48report" label="是否自我申报48小时核酸">
                        <template #default="{ row }">
                            {{ row.report === 0 ? '否' : '是' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单操作">
                        <template #default="scope">
                            <el-button type="primary" :icon="Delete" link circle @click="openDelDialog(scope.row)" />
                            <el-button type="primary" :icon="Edit" link circle @click="openEditDialog(scope.row)" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination background v-model:current-page="data.pageinfo.page" v-model:page-size="data.pageinfo.size"
                :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="data.total" />
        </el-card>
        <!-- 删除 对话框 -->
        <el-dialog v-model="data.dialogVisible" title="系统提示" width="30%">
            <span><b>您正在进行用户挂号信息删除操作，删除后用户需要重新挂号，确定要删除吗？</b></span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="delDepartment">
                        确认删除
                    </el-button>
                    <el-button @click="data.dialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑功能 对话框 -->
        <el-dialog v-model="data.editDialog" title="挂号详情" width="30%">
            <el-form :inline="true" :model="data.editData" class="demo-form-inline">
                <el-form-item label="订单编号">
                    <el-input v-model="data.editData.id" disabled />
                </el-form-item><br>
                <el-form-item label="挂号时间">
                    <el-input v-model="data.editData.regtime" disabled />
                </el-form-item><br>
                <el-form-item label="患者姓名">
                    <el-input v-model="data.editData.name" disabled />
                </el-form-item><br>
                <el-form-item label="是否为复诊">
                    <el-input v-model="data.editData.further" disabled />
                </el-form-item><br>
                <el-form-item label="48H核酸报告">
                    <el-input v-model="data.editData['48report']" disabled />
                </el-form-item><br>
                <el-form-item label="挂号科室">
                    <el-input v-model="data.editData.department" disabled />
                </el-form-item><br>
                <el-form-item label="手机号">
                    <el-input v-model="data.editData.phone" disabled />
                </el-form-item><br>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="data.editDialog = false">确认</el-button>
                    <el-button @click="data.editDialog = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import { getRegisterListReq, getRegisterByIdReq, delRegisterReq, batchdelRegisterReq, searchRegisterReq } from '@/api/register/register.api'
import { watchEffect, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from "dayjs"

interface registerInfo {
    "id": number,
    "48report": number,
    "department": '',
    "further": '',
    "name": '',
    "phone": '',
    "regtime": ''
}

interface search {
    page: 1,
    size: 10,
    id: number,
    phone: string
}
const data = reactive({
    pageinfo: {
        page: 1,
        size: 10
    },
    searchData: <search>{
        page: 1,
        size: 10
    },
    tableData: [],
    total: null,
    dialogVisible: false,
    registerId: null,
    editDialog: false,
    getId: null,
    editData: <registerInfo>{}
})

//获取列表
const getList = async () => {
    const res = await getRegisterListReq({ page: data.pageinfo.page, size: data.pageinfo.size })
    data.tableData = res.data.data
    data.total = res.data.total
    console.log(res);
}

//删除单个科室
const openDelDialog = (row) => {
    data.registerId = row.id
    data.dialogVisible = true
}

const delDepartment = async () => {
    const res = await delRegisterReq({ id: data.registerId })
    data.dialogVisible = false
    if (res.data.code === 1) {
        ElMessage({
            message: '数据删除成功',
            type: 'success'
        })
    } else {
        ElMessage.error('数据删除失败')
    }
    getList()
    console.log(res);
}

//编辑单个科室
const openEditDialog = async (row) => {
    data.editDialog = true
    data.getId = row.id
    const res = await getRegisterByIdReq({ id: data.getId })
    res.data.data[0].regtime = dayjs(res.data.data[0].regtime).format('YYYY-MM-DD HH:mm:ss')
    if (res.data.data[0]['48report'] === 1) {
        res.data.data[0]['48report'] = '是'
    } else {
        res.data.data[0]['48report'] = '否'
    }
    data.editData = res.data.data[0]
}

//查询挂号
const searchInfo = async () => {
    const res = await searchRegisterReq(data.searchData)
    data.tableData = res.data.data
}

//批量删除

let checkIds = []

const getCheckId = (val) => {
    checkIds = []
    if(val){
        val.forEach(item => {
            checkIds.push(item.id)
        })
    }
}

const checkDel = async () => {
    const res = await batchdelRegisterReq({ids:`${JSON.stringify(checkIds)}`})
    if (res.data.code === 1) {
        ElMessage.success('批量删除成功')
    } else {
        ElMessage.error('批量删除失败')
    }
    getList()
}

watchEffect(getList)

</script>

<style scoped lang="scss">
.name {
    display: flex;

    .num {
        display: flex;
        align-items: center;

        b {
            width: 100px;
        }
    }

    .phone {
        margin-left: 60px;
        display: flex;
        align-items: center;

        b {
            width: 100px;
        }
    }

    .el-button--primary {
        margin-left: 50px;
    }

    .delete-all {
        margin-left: 720px;
    }
}

.list {
    margin-top: 20px;
}

.el-pagination {
    margin-top: 20px;
}
</style>